<template>
  <div class="page-container">
    <div class="control-container">
      <div class="right-panel">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="仪器仪表库" name="first">
            <div class="search-panel">
              <el-form :inline="true" label-width="100">
                <el-form-item label="品牌">
                  <el-select v-model="query.type" class="w-100" placeholder="请选择品牌">
                    <el-option
                      v-for="(item,index) in factorTypes"
                      :key="index+'task_status'"
                      :value="item.code"
                      :label="item.codeName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="类型">
                  <el-select v-model="query.type" class="w-100" placeholder="请选择类型">
                    <el-option
                      v-for="(item,index) in factorTypes"
                      :key="index+'task_type'"
                      :value="item.code"
                      :label="item.codeName"
                    />
                  </el-select>
                </el-form-item>
                <el-button type="primary" @click="handleSelect">查询</el-button>
                <el-button type="primary" @click="resetQuery">重置</el-button>
              </el-form>
            </div>
            <div class="table-tools-bar flex">
              <div class="table-btns-right">
                <el-button type="primary" @click="handleAdd">添加</el-button>
              </div>
            </div>
            <div class="table-panel">
              <el-table
                v-loading="tableLoading"
                class="grid-data-table"
                height="calc(100vh - 400px)"
                :data="tableData"
              >
                <el-table-column align="center" type="index" width="80" />
                <el-table-column prop="name" label="品牌型号" />
                <el-table-column prop="name" label="类型" />
                <el-table-column prop="name" label="监测因子" />
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleDetalis(scope.row)">详情</el-button>
                    <el-button type="primary" size="small" @click="handleUpdate(scope.row)">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="仪器仪表运行状态配置" name="second">
            <div class="search-panel">
              <el-form :inline="true" label-width="100">
                <el-form-item label="品牌">
                  <el-select v-model="query.type" class="w-100" placeholder="请选择品牌">
                    <el-option
                      v-for="(item,index) in factorTypes"
                      :key="index+'task_status'"
                      :value="item.code"
                      :label="item.codeName"
                    />
                  </el-select>
                </el-form-item>
                <el-button type="primary">查询</el-button>
              </el-form>
            </div>
            <div class="table-tools-bar flex">
              <div class="table-btns-right">
                <el-button type="primary" @click="handleAdd">添加</el-button>
              </div>
            </div>
            <div class="table-panel">
              <el-table
                v-loading="tableLoading"
                class="grid-data-table"
                height="calc(100vh - 400px)"
                :data="tableData"
              >
                <el-table-column align="center" type="index" width="80" />
                <el-table-column prop="name" label="品牌型号" />
                <el-table-column prop="name" label="状态代码" />
                <el-table-column prop="name" label="状态名称" />
                <el-table-column prop="name" label="创建人" />
                <el-table-column prop="name" label="创建时间">
                  <template slot-scope="scope">{{ scope.row }}</template>
                </el-table-column>
                <el-table-column prop="name" label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small">查看状态值</el-button>
                    <el-button type="primary" size="small">修改</el-button>
                    <el-button type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
                    <el-button type="primary" size="small">修改状态值</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="仪器仪表工作参数配置" name="third">
            <div class="search-panel">
              <el-form :inline="true" label-width="100">
                <el-form-item label="品牌">
                  <el-select v-model="query.type" class="w-100" placeholder="请选择品牌">
                    <el-option
                      v-for="(item,index) in factorTypes"
                      :key="index+'task_status'"
                      :value="item.code"
                      :label="item.codeName"
                    />
                  </el-select>
                </el-form-item>
                <el-button type="primary">查询</el-button>
              </el-form>
            </div>
            <div class="table-tools-bar flex">
              <div class="table-btns-right">
                <el-button type="primary" @click="handleAdd">添加</el-button>
              </div>
            </div>
            <div class="table-panel">
              <el-table
                v-loading="tableLoading"
                class="grid-data-table"
                height="calc(100vh - 400px)"
                :data="tableData"
              >
                <el-table-column align="center" type="index" width="80" />
                <el-table-column prop="name" label="品牌型号" />
                <el-table-column prop="name" label="工作参数代码" />
                <el-table-column prop="name" label="工作参数名称" />
                <el-table-column prop="name" label="参数上限值" />
                <el-table-column prop="name" label="参数下限值" />
                <el-table-column prop="name" label="参数标准值" />
                <el-table-column prop="name" label="排放口名称" />
                <el-table-column prop="name" label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
                    <el-button type="primary" size="small">修改状态值</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="仪器仪表远程控制配置" name="fourth">
            <div class="search-panel">
              <el-form :inline="true" label-width="100">
                <el-form-item label="品牌">
                  <el-select v-model="query.type" class="w-100" placeholder="请选择品牌">
                    <el-option
                      v-for="(item,index) in factorTypes"
                      :key="index+'task_status'"
                      :value="item.code"
                      :label="item.codeName"
                    />
                  </el-select>
                </el-form-item>
                <el-button type="primary">查询</el-button>
              </el-form>
            </div>
            <div class="table-tools-bar flex">
              <div class="table-btns-right">
                <el-button type="primary" @click="handleAdd">添加</el-button>
              </div>
            </div>
            <div class="table-panel">
              <el-table
                v-loading="tableLoading"
                class="grid-data-table"
                height="calc(100vh - 400px)"
                :data="tableData"
              >
                <el-table-column align="center" type="index" width="80" />
                <el-table-column prop="name" label="品牌型号" />
                <el-table-column prop="name" label="远程控制代码" />
                <el-table-column prop="name" label="远程控制名称" />
                <el-table-column prop="name" label="创建人" />
                <el-table-column prop="name" label="创建时间">
                  <template slot-scope="scope">{{ scope.row }}</template>
                </el-table-column>
                <el-table-column prop="name" label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
                    <el-button type="primary" size="small">修改状态值</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <AddInstrumentDialog
      :dialog-visible="dialogVisible"
      :dialog-type="dialogType"
      :obj="obj"
      @closeDialog="closeDialog"
      @flushPage="initData"
    />
  </div>
</template>

<script>
import AddInstrumentDialog from './components/AddInstrumentDialog'
export default {
  name: 'InstrumentPage',
  components: {
    AddInstrumentDialog
  },
  data() {
    return {
      activeName: 'first',
      query: {
        type: ''
      },
      factorTypes: [
        { code: 1, codeName: '品牌1' }
      ],
      tableLoading: true,
      tableData: [
        {
          name: '都干啥'
        }
      ],
      dialogVisible: false,
      dialogType: '',
      obj: {}
    }
  },
  created() {
    this.initData()
  },
  mounted() {},
  methods: {
    handleClick() {},
    // 初始化
    initData() {
      this.resetQuery()
      this.handleSelect()
    },
    // 查询
    handleSelect() {
      this.tableLoading = false
    },
    // 重置查询条件
    resetQuery() {
      this.query = {
        type: ''
      }
    },
    // 添加
    handleAdd() {
      this.obj = null
      this.dialogVisible = true
      this.dialogType = 'add'
    },
    // 详情
    handleDetalis(row) {
      this.obj = row
      this.dialogVisible = true
      this.dialogType = 'detail'
    },
    // 修改
    handleUpdate(row) {
      this.obj = row
      this.dialogVisible = true
      this.dialogType = 'update'
    },
    // 关闭
    closeDialog() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
